<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<!-- 所需的文件	外部页面引入以免多次调用时重复
<link rel="stylesheet" type="text/css"
	href="js/webuploader-0.1.5/webuploader.css" />
<script type="text/javascript" src="js/webuploader-0.1.5/webuploader.js"></script>
<script type="text/javascript" src="js/sharefunction.js"></script> -->
	
<c:set var="id" value='<%=request.getParameter("id")%>' scope="page" />
<c:set var="smallImgId" value='<%=request.getParameter("smallImgId")%>' scope="page" />
<div>
	<!-- 用来存储物件id的隐藏域 -->
	<input id="ArticleId_${pageScope.id }" name="ArticleId_${pageScope.id }" value='<%=request.getParameter("articleId")%>' hidden="hidden">
	<!-- 用来存储附件上传成功后的附件id和物件id -->
	<input id="${pageScope.id }" name="${pageScope.id }" value='' hidden="hidden">
	<table>
		<tr>
			<!-- 物件名 -->
			<td style="text-align: left;">
				<!--上传附件部分-->
				<div id="uploader-demo">
					<!--用来存放item-->
					<div id="fileList_${pageScope.id }" class="uploader-list"></div>
				    <div id="filePicker_${pageScope.id }" >上传</div>
				</div>
				<style>
					/* 控制删除按钮的样式 */
					span.uploadcancel {
						width: 20px;
					    height: 17px;
					    display: inline-block;
					    background: url(images/icons.png) no-repeat;
						background-position: -48px 0px;
						cursor:pointer;
					}
				</style>
				<script type="text/javascript">
					var upload_${pageScope.id };
					$(function(){
						//向后台传入的参数 物件id
						var data={ArticleId:$("#ArticleId_${pageScope.id }").val()};
						upload_${pageScope.id }=webupload("#filePicker_${pageScope.id }","#${pageScope.smallImgId}",data,"project/accessoryCa/addAccessoryCa",webuploadSuccez_${pageScope.id },webuploadErr);
						//当刚开始这个div没有被展示 display=none时 这个div的宽高会为0，导致不能点击，所以要手动设置高度
						$("div[id^=filePicker] div").css({"width":"60px","height":"30px","padding":"6px 10px","background-image":"linear-gradient(to bottom,#ee5f5b,#bd362f)","text-shadow":"0 -1px 0 rgba(0,0,0,0.25)"});
						
						//当文件加入队列时执行
						/* upload_${pageScope.id }.onFileQueued = function( file ) {
							var $t=$("<span class=\"uploadcancel\" onclick=\"removeQueueUpload_${pageScope.id }('"+file.id+"')\" ></span>");
				        	$("#${pageScope.smallImgId}").find("#"+file.id).append($t);
				        }; */
						
				        //当文件从队列中移除时执行
				        upload_${pageScope.id }.onFileDequeued=function(file){
				        	//删除缩略图中文件
				        	$("#"+file.id).remove();
				        	//删除上传成功后隐藏域中的文件
        					removeHid_${pageScope.id }(file.id);
				        };
				        
					});
					
					//上传成功的回调函数
					function webuploadSuccez_${pageScope.id }(file, response) {
						var acal = $("#${pageScope.id }");
						var val = acal.val();
						//extendId 扩展id：上传插件为该文件生成的唯一id(file.id)
						var t = "{\"extendId\":\""+file.id+"\",\"accessoryCAId\":\"" + response.accessoryCAId + "\",\"articleId\":\"" + response.articleId + "\"}";
						if (val == "") {
							acal.val(t);
						} else {
							acal.val(val + "," + t);
						}
						//上传完成后为缩略图添加对应的服务器路径,以便提供图片放大
						$("#"+file.id+" img").attr("imgUrl",response.imgUrl);
						$("#"+file.id+" a").attr("href",response.imgUrl).attr("target","_blank");
						//图片放大
						PostbirdImgGlass.init({
							domSelector : "img",
							animation : true,
							//height : '80%',
							myDocument : window.parent.parent.parent
						});
					}
					//上传失败的回调函数
					function webuploadErr(file, response) {
						
					}
					
					//删除队列中的文件，同时触发队列移除文件事件从而删除缩略图信息
					function removeQueueUpload_${pageScope.id }(id){
						upload_${pageScope.id }.removeFile(id);
					}
					
					//删除隐藏域中的值,fileId:对应该插件自动生成的id也就是附件隐藏域的extendId
					function removeHid_${pageScope.id }(fileId){
						//获取隐藏域的值
						var $t=$("#${pageScope.id }");
						//删除隐藏域中对应着被删除图片的值,将隐藏域中的值转成json数组对象，再讲对应位置的json对象删除，最后在转换回隐藏域中规定的值
						var ja=JSON.parse("["+$t.val()+"]");
						$.each(ja,function(i,v){
							if(v.extendId==fileId){
								ja.splice(i,1);
								if(ja.length>0){
									$t.val(JSON.stringify(ja).replace("[", "").replace("]", ""));
								}else{
									$t.val("");
								}
								return false;
							}
						});
					}
				</script>
			
			</td>
		</tr>
	</table>
</div>
